<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <script src="./layui/layui.js"></script>
  <script src="http://cdn1.lncld.net/static/js/3.3.1/av-min.js"></script>
  <script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>
</head>

<body>
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">姓名</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-block">
        <input type="radio" name="sex" value="男" title="男">
        <input type="radio" name="sex" value="女" title="女" checked>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">手机号</label>
      <div class="layui-input-inline">
        <input type="number" name="phone" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">邮箱</label>
      <div class="layui-input-inline">
        <input type="email" name="email" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">所在城市</label>
      <div class="layui-input-block">
        <select name="city" lay-verify="required">
          <option value=""></option>
          <option value="0">北京</option>
          <option value="1">上海</option>
          <option value="2">广州</option>
          <option value="3">深圳</option>
          <option value="4">杭州</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        <button type="button" onclick="AsyncData()" class="layui-btn layui-btn-primary">同步</button>
      </div>
    </div>
  </form>
  <script>
    function initDB() {
      db = new Dexie("user_database");
      db.version(1).stores({
        user: 'name,sex,phone,email,city,upload'
      });
    }

    window.onload = function () {
      initDB()

      if (navigator.onLine) {
        var APP_ID = 'FL2oXOMLKV7OUsiGBXX24JA9-gzGzoHsz';
        var APP_KEY = '7UVrM1BA1LVIIC7sajArw6RQ';

        AV.init({
          appId: APP_ID,
          appKey: APP_KEY
        });
      }

    }

    function AsyncData() {
      if(!navigator.onLine){
        alert('请连接网络后进行同步')
        return 
      }

      var User = AV.Object.extend('user');
      db.user.toArray().then(function (data) {
        // 转换待上传数据
        let users = data.map(function (item) {
          let user = new User()
          user.set('name', item.name)
          user.set('sex', item.sex)
          user.set('phone', item.phone)
          user.set('email', item.email)
          user.set('city', item.city)
          return user
        })

        // 提交上传数据
        AV.Object.saveAll(users).then(function () {
          db.user.clear()
          alert('同步完成')
        }, function () {
          alert('同步失败')
        })
      })
    }

    layui.use('form', function () {
      var form = layui.form;

      //监听提交
      form.on('submit(formDemo)', function (data) {
        db.user.put(data.field)
          .then(function (friend) {
            alert("提交成功-" + friend);
          }).catch(function (error) {
            alert("提交失败" + error);
          });

        return false;
      });
    });
  </script>
</body>

</html>